<template>
    <view class="page">
        <intake-nav-bar title="设置" dark :fixed="true" />
        <!-- 功能列表区域 -->
        <view class="menu-card">
            <view class="menu-content">
                <view class="menu-item">
                    <text class="menu-text">个性化推荐</text>
                    <switch :checked="isChecked" @change="handleChange" color="#00CFFF" />
                </view>
                <view class="tip">开关打开时，你将可以收到专属优惠信息和内容建议打开。</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isChecked: true,
            menuList: [
                { text: '用户协议', key: '4' },
                { text: '隐私协议', key: '3' },
                { text: '个性化推荐', key: '5' },
            ],
        }
    },
    methods: {
        handleMenuClick(e) {
            // 用户协议
            if (e.key === '4') {
                uni.navigateTo({
                    url: '/pages/users_purchasing/privacy/index?type=4'
                });
            } else if (e.key === '3') { //隐私协议
                uni.navigateTo({
                    url: '/pages/users_purchasing/privacy/index?type=3'
                });
            } else if (e.key === '5') {
                uni.navigateTo({
                    url: '/pages/users_purchasing/privacy/index?type=3'
                });
            }
        },
        handleChange(e) {
            uni.showToast({
                title: '操作成功',
                icon: 'none',
            });
        },
    }
}
</script>
<style lang="scss">
page {
    width: 100%;
    height: 100vh;
    padding: 20px;
    background: linear-gradient(to bottom, #E3EAFB 0%, transparent 100%);
}


.menu-card {
    width: 690rpx;
    height: 90rpx;
    background: #F5F9FF;
    border-radius: 30rpx;
    // margin: -20rpx 0 0;
    // padding: 62rpx 30rpx;
}

.menu-content {
    width: 690rpx;
    height: 90rpx;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10rpx;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    padding: 20rpx;

    /* border-bottom: 1px solid #EEEEEE; */
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-text {
    font-size: 24rpx;
    color: #333333;
}

.tip {
    font-size: 24rpx;
    color: #999;
    margin: 20rpx 0;
}
</style>